<template>
  <view
    v-if="shenheStatus == 0"
    class="salesman"
    @touchstart="touchScreen"
    @touchend="touchScreen"
  >
    <view
      class="head"
      :style="[
        {
          height: show ? '100vh' : '',
        },
      ]"
    >
      <view class="userInfo">
        <view class="user">
          <image :src="user.avatar"></image>
          <view class="info">
            <text>{{ user.name }}</text>
            <text
              >{{ $t('salesman.belong') }}/{{
                user.up_name == '' ? '-' : user.up_name
              }}</text
            >
          </view>
        </view>
        <view
          class="code"
          @click="
            $utils.toUrl(
              '/salesman/salesman/code?pic=' +
                user.avatar +
                '&name=' +
                user.name
            )
          "
        >
          <text class="iconfont icon-QRcode"></text>
          <text>{{ $t('title.shareQrcode') }}</text>
          <text class="iconfont icon-arrow-right more"></text>
        </view>
      </view>
      <view class="count">
        <view
          class="countItem column"
          @click="$utils.toUrl('/salesman/juniorShop/juniorShop')"
        >
          <text>下级店铺</text>
          <text>{{ user.sub_merchant_count.all || 0 }}</text>
        </view>
        <view
          class="countItem column"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>待处理</text>
          <text>{{ user.handle_count.all || 0 }}</text>
        </view>
        <view
          class="countItem column"
          @click="$utils.toUrl('/salesman/order/list')"
        >
          <text>订单数</text>
          <text>{{ user.count.all || 0 }}</text>
        </view>
        <view
          class="countItem row"
          @click="$utils.toUrl('/salesman/juniorShop/juniorShop')"
        >
          <text>昨日</text>
          <text>{{
            user.sub_merchant_count.prev > 0
              ? user.sub_merchant_count.prev
              : '-'
          }}</text>
        </view>
        <view
          class="countItem row"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>昨日</text>
          <text>{{
            user.handle_count.prev > 0 ? user.handle_count.prev : '-'
          }}</text>
        </view>
        <view
          class="countItem row"
          @click="$utils.toUrl('/salesman/order/list')"
        >
          <text>昨日</text>
          <text>{{ user.count.prev ? user.count.prev : '-' }}</text>
        </view>
      </view>
      <view class="down" @click="upglide" v-if="!show">
        <text></text>
        <text></text>
      </view>
      <view class="spaces" v-if="show">
        <view class="spaceItem">
          <text>可提现</text>
          <text>{{ user.no_pay_money.all || 0 }}</text>
          <text
            >昨日
            {{
              user.no_pay_money.prev > 0 ? user.no_pay_money.prev : '-'
            }}</text
          >
        </view>
        <view class="spaceItem">
          <text>已提现</text>
          <text>{{ user.is_pay_money.all || 0 }}</text>
          <text
            >昨日
            {{ user.is_pay_money.all > 0 ? user.is_pay_money.all : '-' }}</text
          >
        </view>
        <view class="spaceItem">
          <text>累计</text>
          <text>{{ user.all_pay_money.all || 0 }}</text>
          <text
            >昨日
            {{
              user.all_pay_money.all > 0 ? user.all_pay_money.all : '-'
            }}</text
          >
        </view>
      </view>
      <!-- <view class="withdrow">
        <view
          class="money"
          @click="$utils.toUrl('/salesman/withdraw/withdraw?status=1')"
        >
          <text>{{ $t("salesman.received") }}</text>
          <text>{{ user.is_pay_money || 0 }}</text>
          <text>{{ $t("order.integral3") }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view> -->
    </view>
    <view class="content" v-if="!show" :animation="contentAnimation">
      <view class="title">
        <view>
          <image src="../images/notice.png"></image>
          <u-notice-bar
            :list="user.notice"
            class="notice"
            :volumeIcon="false"
            color="#8c8c8c"
            mode="vertical"
            bgColor="#fff"
          ></u-notice-bar>
        </view>
        <text class="iconfont icon-arrow-right"></text>
      </view>
      <view class="count">
        <view
          class="countItem column"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>待审核</text>
          <text>{{ user.examine.all || 0 }}</text>
        </view>
        <view
          class="countItem column"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>待完成</text>
          <text>{{ user.repair.all || 0 }}</text>
        </view>
        <view
          class="countItem column"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>已完成</text>
          <text>{{ user.finish.all || 0 }}</text>
        </view>
        <view
          class="countItem row"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>昨日</text>
          <text>{{ user.examine.pre > 0 ? user.examine.pre : '-' }}</text>
        </view>
        <view
          class="countItem row"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>昨日</text>
          <text>{{ user.repair.pre > 0 ? user.repair.pre : '-' }}</text>
        </view>
        <view
          class="countItem row"
          @click="$utils.toUrl('/salesman/checkShop/checkShop')"
        >
          <text>昨日</text>
          <text>{{ user.finish.pre > 0 ? user.finish.pre : '-' }}</text>
        </view>
      </view>
      <view class="optionList">
        <view
          class="optionItem"
          @click="
            $utils.toUrl('/salesman/salesman/applyShop?salesman_id=' + user.id)
          "
        >
          <image src="../images/create.png"></image>
          <text>创建商户</text>
        </view>
        <view class="optionItem" @click="$utils.toUrl('/salesman/order/list')">
          <image src="../images/order.png"></image>
          <text>分销订单</text>
        </view>
        <view
          class="optionItem"
          @click="$utils.toUrl('/pages/union/user-account')"
        >
          <image src="../images/withdraw.png"></image>
          <text>账户提现</text>
        </view>
        <view
          class="optionItem"
          @click="$utils.toUrl('/salesman/withdraw/withdraw')"
        >
          <image src="../images/detail.png"></image>
          <text>结算明细</text>
        </view>
        <view
          class="optionItem"
          @click="$utils.toUrl('/salesman/juniorShop/juniorShop')"
        >
          <image src="../images/store.png"></image>
          <text>下级店铺</text>
        </view>
      </view>
      <view class="storeList" style="display: none;">
        <view class="storeItem" v-for="(item, index) in user.mini" :key="index">
          <view class="storeInfo">
            <view class="name">
              <text
                class="iconfont icon-zhifubao1"
                v-if="item.type == 'ali'"
              ></text>
              <text
                class="iconfont icon-weixin1"
                v-if="item.type == 'weixin'"
              ></text>
              <text class="storeName">{{ item.name }}</text>
              <text class="reason">审核失败</text>
            </view>
            <text class="fail">{{ item.msg || '' }}</text>
            <text>{{ item.fail_time }}</text>
          </view>
          <text class="btn" @click="toComplete(item)">去处理</text>
        </view>
      </view>
    </view>
    <view class="popup" v-if="show">
      <view class="toHome" @click="show = false">
        <view class="icon">
          <text class="iconfont icon-password"></text>
        </view>
        <text>返回首页</text>
      </view>
    </view>

    <!-- <view class="options">
      <view
        class="option"
        @click="$utils.toUrl('/salesman/juniorShop/juniorShop')"
      >
        <image :src="asyncImgs.salesman.icon_1"></image>
        <text>{{ $t("salesman.junior") }}</text>
      </view>
      <view
        class="option"
        @click="$utils.toUrl('/salesman/checkShop/checkShop?status=1')"
      >
        <image :src="asyncImgs.salesman.icon_2"></image>
        <text>{{ $t("salesman.check") }}</text>
      </view>
      <view class="option" @click="$utils.toUrl('/salesman/application/list')">
        <image :src="asyncImgs.salesman.icon_3"></image>
        <text>{{ $t("salesman.pay") }}</text>
      </view>
      <view class="option" @click="$utils.toUrl('/salesman/withdraw/withdraw')">
        <image :src="asyncImgs.salesman.icon_4"></image>
        <text>{{ $t("share.detail") }}</text>
      </view>
    </view>
    <view class="commission">
      <view class="bottom">
        <view
          class="commissionItem"
          @click="$utils.toUrl('/salesman/withdraw/withdraw?status=0')"
        >
          <view class="title">
            <text>{{ $t("shareholder.noGet") }}</text>
            <text>{{ $t("salesman.notReceived") }}</text>
          </view>
          <view class="money">
            <text>{{ user.no_pay_money || 0 }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
        <view
          class="commissionItem"
          @click="$utils.toUrl('/salesman/order/list')"
        >
          <view class="title">
            <text>{{ $t("mdAdmin.order") }}</text>
            <text>{{ $t("salesman.order") }}</text>
          </view>
          <view class="money">
            <text>{{ user.count }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
    </view> -->
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      user: {
        id: 0,
        all_pay_money: {},
        avatar: '',
        count: {},
        examine: {},
        finish: {},
        handle_count: {},
        is_pay_money: {},
        mini: [],
        name: '',
        no_pay_money: {},
        repair: {},
        sub_merchant_count: {},
        up_name: '',
        notice: [],
      },
      list: ['111111', '22222'],
      show: false,
      start: 0,
      end: 0,
      contentAnimation: {},
    };
  },
  methods: {
    // 获取首页数据
    async getIndex() {
      const res = await this.$allrequest.merchant.index();
      if (res.code == 0) {
        this.user = res.data;
      }
    },
    // 触摸事件开始监听
    touchScreen(e) {
      if (e.type == 'touchstart') {
        this.start = e.changedTouches[0].pageY;
      }
      if (e.type == 'touchend') {
        this.end = e.changedTouches[0].pageY;
        if (this.end - this.start < -200) {
          if (!this.show) {
            this.upglide();
          }
        }
      }
    },
    // 上滑动画触发
    upglide() {
      this.show = true;
    },
    // 去处理失败的小程序
    toComplete(e) {
      if (e.type == 'weixin') {
        this.$utils.toUrl(
          '/salesman/application/complete?id=' + e.bind_store_id
        );
      }
      if (e.type == 'ali') {
        this.$utils.toUrl(
          '/salesman/application/aliComplete?id=' + e.bind_store_id
        );
      }
    },
  },
  onShow() {
    this.getIndex();
  },
};
</script>

<style lang="scss" scoped>
.salesman {
  font-family: PingFang SC;
  color: #262626;
  background-color: #f8f8f8;
  min-height: 100vh;
}
.head {
  width: 100%;
  padding: 24rpx 24rpx 54rpx 24rpx;
  background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
  .userInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    .user {
      display: flex;
      color: #fff;
      image {
        width: 72rpx;
        height: 72rpx;
        background-color: #f2f2f2;
        border-radius: 50%;
      }
      .info {
        display: flex;
        flex-direction: column;
        margin-left: 12rpx;
        font-size: 22rpx;
        text:nth-child(1) {
          font-size: 32rpx;
          font-weight: 600;
        }
        text:nth-child(2) {
          opacity: 0.5;
        }
      }
    }
    .code {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 24rpx;
      font-weight: 600;
      .iconfont {
        font-weight: normal;
      }
      .iconfont:nth-child(1) {
        font-size: 48rpx;
      }
      .more {
        font-size: 20rpx;
      }
    }
  }
  .count {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    color: #fff;
    font-size: 26rpx;
    .countItem {
      width: 33.3%;
      text-align: center;
      margin-bottom: 10rpx;
      text:nth-child(1) {
        opacity: 0.5;
      }
    }
    .row {
      text:nth-child(2) {
        margin-left: 10rpx;
        opacity: 0.5;
      }
    }
    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
      text:nth-child(2) {
        opacity: 1;
        font-size: 36rpx;
        font-weight: 600;
        margin-top: 6rpx;
      }
    }
  }
  .down {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    text {
      width: 40rpx;
      height: 10rpx;
      background-color: #fff;
    }
    text:nth-child(1) {
      border-radius: 99rpx 0 0 99rpx;
      transform: rotate(20deg) translateX(4rpx);
    }
    text:nth-child(2) {
      border-radius: 0 99rpx 99rpx 0;
      transform: rotate(-20deg) translateX(-4rpx);
    }
  }
  .withdrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 56rpx;
    .money {
      display: flex;
      align-items: baseline;
      font-size: 22rpx;
      color: #262626;
      text:nth-child(2) {
        font-weight: 700;
        font-size: 36rpx;
      }
      text:nth-child(3) {
        font-size: 36rpx;
      }
      .iconfont {
        font-weight: normal;
        font-size: 22rpx;
      }
    }
    .btn {
      width: 146rpx;
      height: 62rpx;
      line-height: 62rpx;
      text-align: center;
      border-radius: 99px;
      background-color: #f0250e;
      font-size: 28rpx;
      color: #fff;
    }
  }
  .spaces {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    .spaceItem {
      width: 222rpx;
      height: 180rpx;
      background-color: #f64e28;
      margin-right: 18rpx;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      padding: 22rpx 16rpx;
      color: #fff;
      margin-bottom: 18rpx;
      text {
        font-size: 26rpx;
        opacity: 0.5;
      }
      text:nth-child(2) {
        font-size: 36rpx;
        font-weight: 600;
        opacity: 1;
        margin: 4rpx 0;
      }
    }
    .spaceItem:nth-child(3n) {
      margin-right: 0;
    }
  }
}
.content {
  transform: translateY(-24rpx);
  background-color: #f8f8f8;
  padding: 24rpx;
  border-radius: 30rpx 30rpx 0 0;
  .title {
    width: 100%;
    height: 68rpx;
    background-color: #fff;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    justify-content: space-between;
    view {
      width: 90%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #8c8c8c;
      image {
        width: 60rpx;
        min-width: 60rpx;
        height: 24rpx;
      }
      .notice {
        flex: auto;
      }
    }
    .iconfont {
      font-size: 20rpx;
      color: #cdcdcd;
    }
  }
  .count {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40rpx;
    color: #8c8c8c;
    font-size: 26rpx;
    .countItem {
      width: 33.3%;
      text-align: center;
      margin-bottom: 10rpx;
    }
    .row {
      text:nth-child(2) {
        margin-left: 10rpx;
      }
    }
    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
      text:nth-child(2) {
        font-size: 36rpx;
        font-weight: 600;
        margin-top: 6rpx;
        color: #262626;
      }
    }
  }
  .optionList {
    margin-top: 48rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .optionItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24rpx;
      image {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 20rpx;
      }
    }
  }
  .storeList {
    margin-top: 48rpx;
    .storeItem {
      background-color: #fff;
      border-radius: 30rpx;
      width: 100%;
      padding: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      .storeInfo {
        display: flex;
        flex-direction: column;
        font-size: 20rpx;
        color: #8c8c8c;
        .fail {
          margin: 10rpx 0;
        }
      }
      .name {
        display: flex;
        align-items: center;
        .iconfont {
          font-size: 48rpx;
        }
        .icon-zhifubao1 {
          color: #2e77fa;
        }
        .icon-weixin1 {
          color: #31b70a;
        }
        .storeName {
          font-size: 24rpx;
          font-weight: 600;
          color: #262626;
        }
        .reason {
          width: 88rxp;
          height: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fdf1f0;
          border-radius: 4rpx;
          font-size: 18rpx;
          color: #f0250e;
          margin-left: 12rpx;
        }
      }
      .btn {
        width: 100rpx;
        height: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        border-radius: 120rpx;
        font-size: 20rpx;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}
.options {
  display: flex;
  align-items: center;
  margin-top: 156rpx;
  padding: 0 64rpx;
  justify-content: space-between;
  .option {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    image {
      width: 46rpx;
      height: 46rpx;
      margin-bottom: 20rpx;
    }
  }
}
.commission {
  margin-top: 60rpx;
  padding: 0 30rpx;
  .commissionItem {
    width: 100%;
    padding: 28rpx;
    display: flex;
    flex-direction: column;
    border: 1px solid #f1f1f1;
    border-radius: 20rpx;
    .title {
      display: flex;
      align-items: baseline;
      text:nth-child(1) {
        font-size: 28rpx;
        font-weight: 600;
      }
      text:nth-child(2) {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-left: 8rpx;
      }
    }
    .money {
      margin-top: 4rpx;
      display: flex;
      align-items: center;
      text:nth-child(1) {
        font-size: 48rpx;
        font-weight: 600;
      }
      .iconfont {
        font-size: 24rpx;
        opacity: 0.8;
        margin-left: 10rpx;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
    .commissionItem {
      width: 324rpx;
    }
  }
}
.popup {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding-top: 40rpx;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .toHome {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    padding-bottom: 48rpx;
    .icon {
      text-align: center;
      line-height: 56rpx;
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      background-color: #fdf1f0;
      .iconfont {
        color: #f0250e;
      }
    }
  }
}
</style>
